/*
 * @作者: kerwin
 * @公众号: 大前端私房菜
 */
import React, { Component } from 'react'
import axios from 'axios'
export default class Cinema extends Component {
    state = {
        cinemaList:[]
    }
    constructor(){
        super()
       
        //请求数据
        // axios.get("https://m.maizuo.com/gateway?cityId=510100&pageNum=1&pageSize=10&type=1&k=4679472").then(res=>{
        //     console.log(res);
        // })
        axios({
            url:"https://m.maizuo.com/gateway?cityId=510100&ticketFlag=1&k=7884681",
            method:"get",
            headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16580266551103961213894657"}',
            'X-Host': 'mall.film-ticket.cinema.list'}
        }).then(res=>{
            console.log(res);
            this.setState({
                cinemaList:res.data.data.cinemas,
                backcinemaList:res.data.data.cinemas
            })
        })
    }
    render() {
        return (
            <div>
               <input type="text"  onBlur={this.handleInput} />
                    {
                        this.state.cinemaList.map(item=>
                            <dl key={item.cinemaId}>
                                <div style={{"margin-left":"25px"}}>{item.name}</div>
                            <div style={{"margin-top":"5px","margin-left":"25px","backgroundColor":"#668"}}>{item.address}</div>
                             </dl>)
                    }
               
            </div>
        )
    }
    handleInput=(e)=>{
        console.log(e.target.value);
     let newList=  this.state.backcinemaList.filter(item=> item.name.toUpperCase().includes(e.target.value.toUpperCase())
            )
            console.log(newList);
            setTimeout(() => {
                
                this.setState({
                    cinemaList:newList
                })
            }, 500);
        //     setState处在同步的逻辑中，异步更新状态，更新真实dom
        //setState处在异步的逻辑中，同步更新状态，同步更新真实dom
    }
}
